<template>
  <div
    style="
      display: flex;
      justify-content: space-between;
      padding: 2rem;
      background-color: #d4d4d4;
    "
  >
    <div style="display: flex; justify-content: space-between">
      <div style="color: #de5f1b">
        {{ userName }}
      </div>

      <div style="margin: 0 1rem">
        <el-button type="primary" plain @click="isOpen">
          {{ isCollapse ? "展开" : "收起" }}
        </el-button>
      </div>
      <!-- 暗黑模式 -->
      <!-- <div>
            <el-switch
              v-model="isDark"
              :active-icon="Moon"
              :inactive-icon="Sunny"
              inline-prompt
              @change="toggleDark"
            />
          </div> -->
    </div>

    <div>
      <span>{{ router.currentRoute.value.name }}</span>
    </div>
    <div>
      <el-button type="danger" round @click="clickQuit">退出</el-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {
  defineComponent,
  ref,
  watch,
  reactive,
  onMounted,
  onUnmounted,
  inject,
} from "vue";

import { useRoute, useRouter } from "vue-router";
// router是全局路由对象
const router = useRouter();

const userName = sessionStorage.getItem("userName");
// 状态管理 pina  composition API模式
import { useCounterStore } from "@/stores/counter.js";
// composition API模式
const counterStore = useCounterStore();
console.log(counterStore.userNamePass.userName, "获取pina中存的信息");

// 侧边栏的展开收起
// 使用 inject 函数接收提供的数据
const isCollapse = inject("isCollapse");
const isOpen = () => {
  isCollapse.value = !isCollapse.value;
};
// 暗黑模式
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();

const toggleDark = useToggle(isDark);

// 退出
const clickQuit = () => {
  sessionStorage.removeItem("token");
  // 路由跳转方法
  // router.replace("/");
  router.push("/");
};

// 获取全部路由
const routerData = reactive(router.options.routes);
// 标题
// const title = inject("title");
// const activeItem = (val: string) => {
// //   title.value = val;
// // };
</script>

<style scoped>
</style>